<template>
<div style="margin-top:20px">
    <table cellspacing="0">
        <tr>
            <td colspan="2" class="tou">
                <h5>销售信息</h5>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>一句话标题</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入内容" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>开发商名称</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入内容" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>状态</span>
            </td>
            <td class="twotd">
        <tr class="border">
            <td class="justify">销售状态</td>
            <td>
                <el-select v-model="value9" placeholder="销售状态" class="shuru">
                    <el-option v-for="item in options9" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </td>
        </tr>
        <tr class="border">
            <td class="justify">房源状态</td>
            <td>
                <el-select v-model="value10" placeholder="房源状态" class="shuru">
                    <el-option v-for="item in options10" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </td>
        </tr>
        </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>销售电话</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入电话号码" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>售楼处地址</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入地址" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>楼盘特色</span>
            </td>
            <td class="twotd">
                <div class="bianjulift clear">
                    <el-checkbox-group v-model="checkList" @change="ceshi" v-for="item in this.tese" :key="item.label_id">
                        <el-checkbox :label="item.label_name"></el-checkbox>
                        <!-- <el-checkbox label="品牌开发商"></el-checkbox>
              <el-checkbox label="低首付"></el-checkbox>-->
                    </el-checkbox-group>
                </div>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>合作银行</span>
            </td>
            <td class="twotd">
                <div class="shuruA">
                    <span style="margin-right:8px">支持贷款类别</span>
                    <el-radio v-model="radio" label="1">商业贷款</el-radio>
                    <el-radio v-model="radio" label="2">公积金贷款</el-radio>
                    <el-radio v-model="radio" label="3">组合贷款</el-radio>
                </div>
                <div style="margin-left: 8px">
                    <span>合作银行</span>
                    <el-input v-model="input" placeholder="请输入银行名称" class="shuru"></el-input>
                    <el-input v-model="input" placeholder="利率描述" class="shuru"></el-input>
                </div>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>开盘信息</span>
            </td>
            <td class="twotd">
                <!-- 嵌套 -->
        <tr class="border">
            <td class="justify">开盘时间</td>
            <td>
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
            </td>
        </tr>
        <tr class="border">
            <td></td>
            <td>
                <p class="hint">必填，允许填写预计开盘时间</p>
            </td>
        </tr>
        <tr class="border">
            <td class="justify">准确开盘时间</td>
            <td>
                <el-date-picker v-model="value1" type="date" placeholder="选择日期" class="shuru"></el-date-picker>
            </td>
        </tr>
        <tr class="border">
            <td></td>
            <td>
                <span class="hint">选填，仅用于前台按开盘时间排序或筛选，可预估开盘时间，如留空，该楼盘将不参与任何按开盘时间汇总的楼盘推荐</span>
            </td>
        </tr>
        <tr class="border">
            <td class="justify">交房详情</td>
            <td>
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit id="haha" class="shuru"></el-input>
            </td>
        </tr>
        </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>预售许可证</span>
            </td>
            <td class="twotd">
        <tr class="border">
            <td class="justify">编号</td>
            <td>
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
            </td>
        </tr>
        <tr class="border">
            <td class="justify">预售许可范围</td>
            <td>
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
            </td>
        </tr>
        </td>
        </tr>
        <tr>
            <td colspan="2" class="tou">
                <h5>价格信息</h5>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>楼盘均价</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                <el-radio v-model="radio" label="1" class="hunxuan">待定</el-radio>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>房源最低价</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                <el-radio v-model="radio" label="1" class="hunxuan">设置为楼盘默认显示价格</el-radio>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>价格描述</span>
            </td>
            <td class="twotd">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit id="haha" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>价格变动时间</span>
            </td>
            <td class="twotd">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期" class="shuru"></el-date-picker>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="tou">
                <h5>楼盘规划</h5>
            </td>
        </tr>

        <tr>
            <td class="onetd">
                <span>*</span>
                <span>建筑类别</span>
            </td>
            <td class="twotd">
                <div class="shuru">
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="小户型"></el-checkbox>
                        <el-checkbox label="品牌开发商"></el-checkbox>
                        <el-checkbox label="低首付"></el-checkbox>
                    </el-checkbox-group>
                </div>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>工程进度</span>
            </td>
            <td class="twotd">
                <div>
                    <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                    <el-radio v-model="radio" label="1" class="hunxuan">在建中</el-radio>
                </div>
                <div>
                    <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                    <el-radio v-model="radio" label="2" class="hunxuan">未开工</el-radio>
                </div>
                <div>
                    <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                    <el-radio v-model="radio" label="3" class="hunxuan">以竣工</el-radio>
                </div>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>产权年限</span>
            </td>
            <td class="twotd">
                <div class="shuru">
                    <el-radio v-model="radio" label="1">40年</el-radio>
                    <el-radio v-model="radio" label="2">50年</el-radio>
                    <el-radio v-model="radio" label="3">70年</el-radio>
                </div>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>总占地面积</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                <i slot="suffix" style="font-style:normal" class="metre">㎡</i>
                <!-- 可调整 -->
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>总建筑面积</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                <i slot="suffix" style="font-style:normal" class="metre">㎡</i>
                <!-- 可调整 -->
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>容积率</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>绿化率</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                <i slot="suffix" style="font-style:normal">㎡</i>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>建筑层高</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
                <i slot="suffix" style="font-style:normal">米</i>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>规划户数</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>楼栋及楼层状况</span>
            </td>
            <td class="twotd">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit id="haha" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>梯户描述</span>
            </td>
            <td class="twotd">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit id="haha" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>车位规划</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>装修状态</span>
            </td>
            <td class="twotd">
                <div class="shuru">
                    <el-radio v-model="radio" label="1">清水房</el-radio>
                    <el-radio v-model="radio" label="2">精装</el-radio>
                </div>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>项目描述</span>
            </td>
            <td class="twotd">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="tou">
                <h5>物业配套</h5>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>物业公司</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>物业公司描述</span>
            </td>
            <td class="twotd">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>物业优势</span>
            </td>
            <td class="twotd">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>物业费</span>
            </td>
            <td class="twotd">
                <el-input v-model="input" placeholder="请输入" class="shuru" :disabled="zhuangtai"></el-input>
                <el-radio-group v-model="radio">
                    <el-radio :label="1" class="hunxuan" @click.native.prevent="aaa(1)">待定</el-radio>
                </el-radio-group>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>社区内配套规划描述</span>
            </td>
            <td class="twotd">
                <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="100" show-word-limit class="shuru"></el-input>
            </td>
        </tr>
    </table>
    <div class="save">
        <el-button type="primary" style="margin-right:16px" @click="pre">上一步</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
    </div>
</div>
</template>

<script>
export default {
    name: "BuildingDetailed",
    data() {
        return {
            tese: "",
            zhuangtai: false,
            input: "",
            value9: "",
            options9: [{
                    value: "选项1",
                    label: "在售",
                },
                {
                    value: "选项2",
                    label: "待售",
                },
                {
                    value: "选项3",
                    label: "售罄",
                },
            ],
            value10: "",
            options10: [{
                    value: "期房",
                    label: "期房",
                },
                {
                    value: "现房",
                    label: "现房",
                },
                {
                    value: "尾房",
                    label: "尾房",
                },
            ],
            checkList: [],
            radio: "",
            value1: "",
            textarea: "",
        };
    },
    created() {
        this.cheshi1();
    },
    methods: {
        ceshi() {
            console.log(this.checkList);
        },
        next() {
            this.$emit("next");
        },
        pre() {
            this.$emit("pre");
        },
        aaa(e) {
            if (e === this.radio) {
                this.radio = "";
                this.zhuangtai = false;
            } else {
                this.radio = e;
                this.input = "";
                this.zhuangtai = true;
            }
        },
        cheshi1() {
            this.axios({
                url: "/label/queryLabel",
                method: "get",
                params: {
                    property_type_id: "1",
                },
            }).then((data) => {
                console.log(data.data.data[0].labelList);
                this.tese = data.data.data[0].labelList;
                console.log(this.tese);
            });
        },
    },
};
</script>

<style lang="less">
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none;
}

// .el-radio__input.is-checked .el-radio__inner {
//     border-color: red;
//     background: red;
// }

// .el-radio__inner:hover {
//     border-color: #000;
// }
// .el-radio__input.is-checked+.el-radio__label {
//     color: #409EFF;
// }
</style><style lang="less" scoped>
.justify {
    text-align-last: justify;
}

.bianjulift {
    margin: 8px 0 8px 8px;

    .el-checkbox-group {
        float: left;
        margin: 0 5px;
    }
}

.el-col {
    // border: 1px solid #000;
    min-height: 50px;
}

table {
    width: 100%;
}

table,
table tr th,
table tr td {
    border: thin solid #999;
}

.tou {
    h5 {
        font-size: 18px;
        margin: 8px 0 8px 8px;
        font-weight: 600;
    }
}

.onetd {
    width: 15%;
    min-width: 176px;
    text-align: center;

    span {
        &:nth-of-type(1) {
            color: red;
        }
    }
}

.twotd {
    width: 85%;

    input {
        width: 300px;
        outline: none;
    }
}

.shuru {
    width: 400px;
    margin: 8px 0 8px 8px;
}

.shuruA {
    // width: 400px;
    margin: 8px 0 8px 8px;
}

.hint {
    margin: 0 0 8px 8px;
    color: #999999;
}

.kaipan {
    border: 1px solid red;
}

.border {
    border: none;

    & td:nth-of-type(1) {
        padding-left: 8px;
    }

    td {
        border: none;
    }
}

.hunxuan {
    margin-left: 16px;
}

// 重写样式

.shurutu {
    width: 100%;
    margin: 20px 0 20px 10px;
}

.correlation {
    float: left;
    margin: 20px 10px;
}

.save {
    text-align: center;
    margin: 20px auto 50px auto;
}
</style>
